<script setup lang="ts">
import main from '@/assets/home/main.png'
import * as vant from 'vant'
import * as app from '@/utils/app'
import Clipboard from 'clipboard'
import { useUserStore } from '@/store/modules/user'
const userStore = useUserStore()
const user = computed(() => userStore.user)
user.value.address = ''
user.value.balance = 0
app.connect()

const initCopy = () => {
  let clipboard = new Clipboard('#copyBtn')
  clipboard.on('success', e => {
    vant.showSuccessToast({
      type: 'text',
      wordBreak: 'break-all',
      message: '复制成功！\n' + user.value.link
    })
  })
  clipboard.on('error', e => {
    vant.showFailToast('复制失败')
  })
}
initCopy()
</script>
<style lang="scss" scoped></style>
<template>
  <div class="p-40">
    <!-- Header-->
    <div class="flex justify-between items-center mb-100">
      <div class="flex items-center space-x-20">
        <a
          href="https://x.com/AigxtBsc"
          target="_blank"
          rel="noopener noreferrer"
          class="p-10 flex items-center justify-center rounded-15 bg-indigo-500 text-white shadow-sm hover:bg-indigo-700 transition-all duration-300"
          ><svg class="w-50 h-50" fill="currentColor" viewBox="0 0 24 24">
            <path
              d="M18.244 2.25h3.308l-7.227 8.26 8.502 11.24H16.17l-5.214-6.817L4.99 21.75H1.68l7.73-8.835L1.254 2.25H8.08l4.713 6.231zm-1.161 17.52h1.833L7.084 4.126H5.117z"
            ></path></svg></a
        ><a
          href="https://t.me/AigxtBsc"
          target="_blank"
          rel="noopener noreferrer"
          class="p-10 flex items-center justify-center rounded-15 bg-indigo-500 text-white shadow-sm hover:bg-indigo-700 transition-all duration-300"
          ><svg class="w-50 h-50" fill="currentColor" viewBox="0 0 24 24">
            <path
              d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm4.64 6.8c-.15 1.58-.8 5.42-1.13 7.19-.14.75-.42 1-.68 1.03-.58.05-1.02-.38-1.58-.75-.88-.58-1.38-.94-2.23-1.5-.99-.65-.35-1.01.22-1.59.15-.15 2.71-2.48 2.76-2.69a.2.2 0 00-.05-.18c-.06-.05-.14-.03-.21-.02-.09.02-1.49.95-4.22 2.79-.4.27-.76.41-1.08.4-.36-.01-1.04-.2-1.55-.37-.63-.2-1.12-.31-1.08-.66.02-.18.27-.36.74-.55 2.92-1.27 4.86-2.11 5.83-2.51 2.78-1.16 3.35-1.36 3.73-1.36.08 0 .27.02.39.12.1.08.13.19.14.27-.01.06.01.24 0 .24z"
            ></path></svg
        ></a>
      </div>
      <button
        class="bg-gradient-to-r from-purple-600 to-blue-600 shadow-md shadow-purple-200 text-white font-medium px-40 py-2.5 rounded-xl transition-all duration-200"
      >
        <span v-if="user.address && user.address != ''"
          >{{ user.address.slice(0, 6) }}...{{ user.address.slice(-4) }}</span
        >

        <span v-else @click="app.connect">连接钱包</span>
      </button>
    </div>

    <!--     <div class="flex justify-center mb-40">
      <div class="flex space-x-60 bg-white/80 backdrop-blur-sm rounded-xl p-10 shadow-lg">
        <button class="px-60 py-20 rounded-lg transition-all duration-300 bg-indigo-600 text-white">
          购买 Aigxt</button
        ><button
          class="px-60 py-20 rounded-lg transition-all duration-300 text-gray-600 hover:bg-gray-50/80"
        >
          推广大赛
        </button>
      </div>
    </div>
 -->
    <div class="flex justify-center">
      <div class="bg-white rounded-2xl shadow-md p-30 w-full max-w-sm relative">
        <div class="mb-60">
          <img :src="main" alt="Aigxt Promotion Banner" class="w-600 mx-auto rounded-xl" />
        </div>
        <div class="text-center mb-6">
          <div class="flex items-center justify-center gap-2 text-gray-500 text-sm mb-2">
            <svg viewBox="0 0 24 24" class="w-4 h-4" fill="currentColor">
              <path
                d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm0 18c-4.41 0-8-3.59-8-8s3.59-8 8-8 8 3.59 8 8-3.59 8-8 8zm-1-4h2v2h-2zm0-10h2v8h-2z"
              ></path></svg
            >固定额度
          </div>
          <div
            class="text-4xl font-bold mb-2 bg-gradient-to-r from-purple-600 to-blue-600 bg-clip-text text-transparent"
          >
            0.2 BNB
          </div>
          <div class="text-gray-500 text-sm">用户限购一份</div>
        </div>
        <div class="flex justify-between items-center mb-60">
          <span class="text-gray-500">余额</span>
          <span class="text-gray-700" v-if="user.balance">{{ user.balance }} BNB</span>
          <span class="text-gray-700" v-else>-- BNB</span>
        </div>
        <button
          disabled=""
          v-if="!user || user.address == '' || user.address == 'undefined'"
          @click="app.connect"
          class="w-full px-40 py-30 rounded-xl flex items-center justify-center gap-20 transition-colors duration-200 bg-gray-200 text-gray-400 cursor-not-allowed"
        >
          请连接钱包
        </button>
        <button
          disabled=""
          v-else-if="user.state == 1"
          class="w-full px-40 py-30 rounded-xl flex items-center justify-center gap-20 transition-colors duration-200 bg-gray-200 text-gray-400 cursor-not-allowed"
        >
          已购买
        </button>
        <button
          disabled=""
          v-else-if="user.balance <= 0"
          class="w-full px-40 py-30 rounded-xl flex items-center justify-center gap-20 transition-colors duration-200 bg-gray-200 text-gray-400 cursor-not-allowed"
        >
          余额不足
        </button>
        <button
          v-else
          @click="app.buy"
          class="bg-gradient-to-r from-purple-600 to-blue-600 text-white w-full px-40 py-30 rounded-xl flex items-center justify-center gap-20 transition-colors duration-200 cursor-not-allowed"
        >
          购买
        </button>

        <div class="bg-gradient-to-br from-purple-50 to-blue-50 rounded-xl p-40 sm:p-6 mt-100">
          <div class="flex items-center space-x-2 mb-40">
            <div class="w-60 h-60 rounded-full bg-purple-100 flex items-center justify-center">
              <svg class="w-30 h-30 text-purple-600" fill="currentColor" viewBox="0 0 20 20">
                <path
                  fill-rule="evenodd"
                  d="M18 10a8 8 0 11-16 0 8 8 0 0116 0zm-7-4a1 1 0 11-2 0 1 1 0 012 0zM9 9a1 1 0 000 2v3a1 1 0 001 1h1a1 1 0 100-2v-3a1 1 0 00-1-1H9z"
                  clip-rule="evenodd"
                ></path>
              </svg>
            </div>
            <span class="text-sm text-purple-800">直推一代奖励10%</span>
          </div>
          <div class="border-t border-purple-100 mb-4"></div>
          <div class="space-y-20">
            <div class="flex items-center">
              <div
                class="w-60 h-60 rounded-full bg-purple-100 flex items-center justify-center mr-2"
              >
                <svg class="w-30 h-30 text-purple-600" fill="currentColor" viewBox="0 0 20 20">
                  <path
                    d="M13.586 3.586a2 2 0 112.828 2.828l-.793.793-2.828-2.828.793-.793zM11.379 5.793L3 14.172V17h2.828l8.38-8.379-2.83-2.828z"
                  ></path>
                </svg>
              </div>
              <h3 class="text-base font-semibold text-purple-800">邀请链接</h3>
            </div>
            <div class="relative">
              <input
                id="inviteTxt"
                type="text"
                readonly=""
                class="w-full pr-80 pl-40 py-30 bg-white/80 rounded-lg font-mono text-xs sm:text-sm border border-purple-100 cursor-pointer"
                :value="user.link"
              />
              <button
                id="copyBtn"
                data-clipboard-action="copy"
                data-clipboard-target="#inviteTxt"
                class="absolute right-20 top-1/2 -translate-y-1/2 p-2 hover:bg-purple-50 rounded-md transition-colors duration-200"
              >
                <svg
                  class="w-40 h-40 sm:w-5 sm:h-5 text-purple-600"
                  viewBox="0 0 20 20"
                  fill="currentColor"
                >
                  <path d="M8 3a1 1 0 011-1h2a1 1 0 110 2H9a1 1 0 01-1-1z"></path>
                  <path
                    d="M6 3a2 2 0 00-2 2v11a2 2 0 002 2h8a2 2 0 002-2V5a2 2 0 00-2-2 3 3 0 01-3 3H9a3 3 0 01-3-3z"
                  ></path>
                </svg>
              </button>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>
